<template>
  <div class="p-2">
    <div class="text-right mb-2" v-if="printAble">
      <el-button size="small" icon="el-icon-printer" :disabled="loading" @click="handlePrint">
        打印
      </el-button>
      <el-button
        icon="el-icon-download"
        :loading="downloadLoading"
        @click="handleExport(relatedData.customer_name)"
      >
        导出
      </el-button>
    </div>
    <div :id="printId">
      <table
        class="table table-bordered vertical-align-middle text-center table-sm"
        v-loading="loading"
      >
        <colgroup>
          <col width="20%" />
          <col width="30%" />
          <col width="25%" />
          <col width="25%" />
        </colgroup>
        <tbody>
          <tr v-for="(p, index) of tableData" :key="index">
            <td class="td-label">{{ p.label }}</td>
            <td :colspan="p.colspan || 1" :class="p.class || 'text-center'">
              {{ relatedData[p.prop] }}
            </td>
            <td class="td-label" v-if="p.label2">{{ p.label2 }}</td>
            <td v-if="p.label2">{{ relatedData[p.prop2] }}</td>
          </tr>
          <tr>
            <td colspan="4" class="text-left text-muted">婚姻信息</td>
          </tr>
          <tr>
            <td class="td-label">婚姻状况</td>
            <td>{{ enumMarriageStatus[relatedData.marriage_status] }}</td>
            <td v-if="relatedData.marriage_status === 1" class="td-label">配偶姓名</td>
            <td v-if="relatedData.marriage_status === 1">{{ relatedData.spouse_name }}</td>
          </tr>
          <tr v-if="relatedData.marriage_status === 1">
            <td class="td-label">配偶证件号</td>
            <td>{{ relatedData.spouse_idcard }}</td>
            <td class="td-label">配偶联系电话</td>
            <td>{{ relatedData.spouse_phone }}</td>
          </tr>
          <tr>
            <td colspan="4" class="text-left text-muted">准入信息</td>
          </tr>
          <tr>
            <td class="td-label" colspan="3">
              年龄是否18-65周岁（借款人年龄加上贷款期限不超过65岁）
            </td>
            <td>
              <i class="fa fa-check text-success" v-if="+(relatedData.is_age_65 || '') === 1"></i>
              <i class="fa fa-times text-danger" v-else></i>
            </td>
          </tr>
          <tr>
            <td class="td-label" colspan="3">
              本人或配偶，至少一人为当地人或在贷款申请所在地生活经营2年以上
            </td>
            <td>
              <i
                class="fa fa-check text-success"
                v-if="+(relatedData.is_business_2 || '') === 1"
              ></i>
              <i class="fa fa-times text-danger" v-else></i>
            </td>
          </tr>
          <tr>
            <td class="td-label" colspan="3">申请贷款日前两年内无连续五次逾期或累计八次逾期</td>
            <td>
              <i
                class="fa fa-check text-success"
                v-if="+(relatedData.is_overdue_5 || '') === 1"
              ></i>
              <i class="fa fa-times text-danger" v-else></i>
            </td>
          </tr>
          <tr>
            <td class="td-label" colspan="3">
              无重大法律纠纷（原告除外）及经济纠纷，未出现严重违法违规行为。
            </td>
            <td>
              <i class="fa fa-check text-success" v-if="+(relatedData.is_crime || '') === 1"></i>
              <i class="fa fa-times text-danger" v-else></i>
            </td>
          </tr>
          <tr v-if="+(relatedData.is_register || '') === 1">
            <td class="td-label">借据号</td>
            <td>{{ relatedData.iou_no }}</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { enumDispute } from '@/bank/plugins/enum'
import { enumLoanbehStatus, enumReviewApproval } from '@/bank/views/limit/index'
import { printA4, excelTableExport, domHasClass } from '@vimi/utils-tool'
import { enumMarriageStatus } from '@/bank/views/business/hplimit/enum'
export default {
  props: {
    queryId: String,
    printAble: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      enumMarriageStatus,
      tableName: 'datum_one_county_industry',
      loading: false,
      relatedData: {},
      tableData: [
        {
          label: '受保企业名称或贷款人姓名',
          prop: 'customer_name',
          label2: '项目状态',
          prop2: 'statusLabel',
        },
        {
          label: '被担保人类型',
          prop: 'org_class_name',
          label2: '归属地址（市、县）',
          prop2: 'addressAll',
        },
        {
          label: '身份证号码',
          prop: 'lender_idcard',
          label2: '受保企业联系人电话',
          prop2: 'corp_phone',
        },
        {
          label: '所属行业',
          prop: 'parent_main_business',
          label2: '十二大产业',
          prop2: 'main_business',
        },
        {
          label: '授信金额（万元）',
          prop: 'reply_funds',
          label2: '授信期限(月)',
          prop2: 'period_credit',
        },
        {
          label: '授信开始时间',
          prop: 'loadDateCredit',
          label2: '授信结束时间',
          prop2: 'loadEndDateCredit',
        },
        {
          label: '放款金额（万元）',
          prop: 'warranty_amount',
          label2: '贷款期限(月)',
          prop2: 'warranty_period',
        },
        { label: '放款开始时间', prop: 'loadDate', label2: '放款结束时间', prop2: 'loadEndDate' },
        {
          label: '放款银行名称',
          prop: 'claim_bank_name',
          label2: '担保费利率(%)',
          prop2: 'warranty_rate',
        },
        {
          label: '借款合同号',
          prop: 'gua_contract',
          label2: '银行贷款利率(%)',
          prop2: 'load_rate',
        },
        {
          label: '销售收入(万元)',
          prop: 'sale_income',
          label2: '资产总额(万元)',
          prop2: 'assets_total',
        },
        {
          label: '从业人数',
          prop: 'emp_total',

          label2: '贷款具体用途',
          prop2: 'funds_use_dir',
        },
        {
          label: '贷款用途分类',
          prop: 'use_category_name',
          label2: '备注',
          prop2: 'remark',
        },
      ],
      downloadLoading: false,
    }
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  computed: {
    printId() {
      return `${this.queryId}-project-detai`
    },
  },
  created() {},
  methods: {
    getData() {
      this.relatedData = {}
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'customer_related_id.eq': this.queryId })
        .then(res => {
          const data = res?.data?.[0] ?? {}
          data.addressAll = `${data.address_name_city || ''}${data.address_name_county || ''}`
          data.isCertMerge = enumDispute[data.is_cert_merge]
          data.isFeeCustomer = enumDispute[data.is_gua_fee_customer]
          data.loadEndDate = this.$utils.dateFormat(data.load_end_date, 'yyyy-MM-dd')
          data.loadDate = this.$utils.dateFormat(data.load_date, 'yyyy-MM-dd')
          data.loadEndDateCredit = this.$utils.dateFormat(data.load_end_date_credit, 'yyyy-MM-dd')
          data.loadDateCredit = this.$utils.dateFormat(data.load_date_credit, 'yyyy-MM-dd')

          data.statusLabel =
            +data.review_approval === 4
              ? enumLoanbehStatus[data.load_beh_status]
              : enumReviewApproval[data.review_approval]
          data.marriage_status = +(data.marriage_status || '')
          this.relatedData = { ...data }
          this.$emit('back', this.relatedData)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
       .vertical-align-middle td { vertical-align: middle; }
       .td-label { text-align: left; background-color: $gray-100; }
      `
      )
    },
    handleExport(name) {
      const borderAllThin = {
        left: { style: 'thin' },
        top: { style: 'thin' },
        right: { style: 'thin' },
        bottom: { style: 'thin' },
      }
      this.downloadLoading = true
      excelTableExport(this.printId, name, {
        styles: {
          border: borderAllThin,
          alignment: {
            vertical: 'center',
            horizontal: 'left',
            wrapText: true,
          },
        },
        cellStyles: {},
        cols: [{ wch: 20 }, { wch: 30 }, { wch: 20 }, { wch: 30 }],
        rows: {},
        cellHandler({ value, td }) {
          const style = {}
          if (domHasClass(td, 'text-center')) {
            style.alignment = { horizontal: 'center' }
          }
          return { value, style }
        },
      }).finally(() => {
        this.downloadLoading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.td-label {
  text-align: left;
  background-color: $gray-100;
}
</style>
